<template>
  <div v-show="false" class="top_sitebar">
    <div class="maxWidth sitebar_container clearfix ">
      <div class="sitebar_entry fl">
        <div class="login_before">
          <a href="javascript:void(0)" _hover-ignore="1">请登录</a>
          <span class="fg_line">|</span>
          <a target="_blank" href="/reg" _hover-ignore="1">注册</a>
          <span class="fg_line">|</span>
          <a href="/unionlog/qq/" _hover-ignore="1">
            <i class=" ico_sitebar_qq"></i>QQ登录</a>
        </div>
      </div>
      <div class="sitebar_topnav fr">
        <ul class="clearfix">
          <li><a target="_blank" href="/hezuo/" style="font-weight: bold">商家报名</a><span class="fg_line">|</span></li>
          <li><a target="_blank" href="/award/">0元抽奖</a><span class="fg_line">|</span></li>
          <li><a target="_blank" href="/push">订阅推荐</a><span class="fg_line">|</span></li>
          <li class="topnav_more" @mouseleave="moreLeave">
            <div @mouseenter.stop="moreEnter"  class="nav_more">更多<i class="arr_down"></i></div>
            <div v-show="showMoreList" class="more_list">
              <ul class="clearfix">
                <li><a target="_blank" href="/app/"><span>下载APP</span></a></li>
                <li><a target="_blank" href="/mall/"><span>商城导航</span></a></li>
                <li><a target="_blank" href="/help/xunzhang.html"><span>帮助中心</span></a></li>
                <li><a target="_blank" href="http://weibo.com/huimcom"><span>官方微博</span></a></li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  data(){
    return {
      showMoreList:false,
    }
  },
  methods:{
    moreEnter(){
      this.showMoreList=true;
    },
    moreLeave(){
      this.showMoreList=false;
    }
  }
}
</script>
<style lang="less" scoped>
  .top_sitebar{
    height: 30px;
    line-height: 30px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ebebeb;
    .sitebar_container{
      .fg_line{
        margin: 0 8px 0 7px;
        display: inline-block;
        vertical-align: middle;
        color: #ccc;
      }
      .sitebar_entry{
        .login_before{
          a {display: inline-block;}
          .ico_sitebar_qq{
            display: inline-block;
            margin: 0 5px 2px 0;
            width: 16px;
            height: 16px;
            vertical-align: middle;
            background: url(https://i.huim.com/content_new/images/site_top1.png?v=20170727) no-repeat 0px -114px;
          }
        }
      }
      .sitebar_topnav{
        >ul{
          >li{
            float: left;
            &.topnav_more{
              position: relative;
              :hover{
                background: #fff;
              }
              .nav_more{
                position: relative;
                width: 40px;
                margin-left: -11px;
                padding-left: 10px;
                border: solid #f5f5f5;
                border-width: 0 1px;
                cursor: pointer;
                .arr_down{
                }
              }
              .more_list{
                position: absolute;
                right: 0px;
                top: 31px;
                _top: 30px;
                width: 80px;
                padding: 5px 0;
              }
            }
          }
        }
      }
    }
  }
</style>
